<template>
    <el-table
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="id"
        :max-height="tableHeight"
        table-layout="auto"
        :header-cell-style="tableHeaderColor"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :fixed="col.fixed"
                :formatter="col.formatter"
                :type="col.type"
                :width="col.width"
            >
            </el-table-column>
        </template>
    </el-table>
    <el-button-group class="bg">
        <el-button class="btn" type="primary" @click="closeWindow"
            >关闭</el-button
        >
    </el-button-group>
    <div class="page">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[50, 100, 150, 200]"
            layout="sizes, prev, pager, next"
            :total="totalnum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup lang="ts" name="AuditInvoicePayDetail">
import { ref, reactive, onMounted, unref, toValue, toRaw } from 'vue';
import { storeToRefs } from 'pinia';
import { ElTable } from 'element-plus';
import { CSSProperties } from 'vue';
import { isEmpty } from 'lodash';
import {
    tableDefaultAttribute,
    useTableInfo,
    tableColumnDefault,
} from '@/hooks/useTable';
import type { TableColumn } from '@/common/types/app';
import { Request } from '@/app/request';
import { tableMaxHeightAdjust } from '@/common/const';
import type { TableColumnCtx, TableInstance } from 'element-plus';

import { AuditInvoicePayDetailViewModel } from '@/common/types/business';
import { useAppStore } from '@/store/app';
import { formatDate, transFormatter } from '@/common/tools';

const tableRef = ref<TableInstance>();
const tableData = ref<Array<AuditInvoicePayDetailViewModel>>([]);
const tableHeight = ref(100);
const {
    client,
    SelectOptionFeeInOut,
    SelectOptionYN,
    cntrOwner,
    currency,
    feecod,
} = storeToRefs(useAppStore());
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'fee_unit_cod') {
        data = client.value;
    } else if (column['property'] === 'force_flag') {
        data = SelectOptionYN.value;
    } else if (column['property'] === 'fee_in_out') {
        data = SelectOptionFeeInOut.value;
    } else if (column['property'] === 'fee_owner') {
        data = cntrOwner.value;
    } else if (
        column['property'] === 'pay_currency_cod' ||
        column['property'] === 'invoice_currency_cod'
    ) {
        data = currency.value;
    } else if (column['property'] === 'fee_cod') {
        data = feecod.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'from_corp_nam',
        label: '发票销售方',
        sortable: 'true',
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'to_corp_nam',
        label: '发票购买方',
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'invoice_no',
        label: '发票号',
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'invoice_currency_cod',
        label: '发票货币',
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: currency.value,
        width: 100,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'invoice_amount',
        label: '发票核销金额',
        sortable: 'true',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'pay_amount',
        label: '实收付核销金额',
        sortable: 'true',
        width: 150,
    },

    {
        ...tableColumnDefault,
        order: 9,
        prop: 'force_flag',
        label: '强制核销',
        formatter: onFormatter,
        formFieldItemType: 'single',
        optionalValues: SelectOptionYN.value,
        width: 100,
    },
    {
        ...tableColumnDefault,
        order: 4,
        prop: 'audit_tim',
        label: '核销日期',
        formatter: formatDate,
        sortable: 'custom',
        formFieldItemType: 'date',
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 7,
        prop: 'remark',
        label: '备注',
        sortable: 'custom',
        width: 400,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'fee_unit_cod',
        label: '实收付客户',
        formatter: onFormatter,
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: client.value,
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 6,
        prop: 'fee_in_out',
        label: '收付款类型',
        formatter: onFormatter,
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: SelectOptionFeeInOut.value,
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 12,
        prop: 'fee_owner',
        label: '成本中心',
        formatter: onFormatter,
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: cntrOwner.value,
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'pay_currency_cod',
        label: '实收付货币',
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: currency.value,
        width: 100,
    },
    {
        ...tableColumnDefault,
        order: 4,
        prop: 'fee_tim',
        label: '付款日期',
        formatter: formatDate,
        sortable: 'custom',
        formFieldItemType: 'date',
        width: 200,
    },
    
    {
        ...tableColumnDefault,
        order: 12,
        prop: 'fee_cod',
        label: '费目',
        formatter: onFormatter,
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: feecod.value,
        width: 120,
    },
]);
const invoiceArray = [
    'from_corp_nam',
    'to_corp_nam',
    'invoice_no',
    'invoice_currency_cod',
];
const payArray = [
    'fee_unit_cod',
    'fee_in_out',
    'fee_owner',
    'fee_typ_cod',
    'fee_cod',
    'fee_tim',
    'pay_currency_cod',
];
const auditArray = [
    'invoice_amount',
    'pay_amount',
    'force_flag',
    'audit_tim',
    'remark',
];

const props = defineProps<{
    auditNo?: string;
    invoiceNo?: string;
}>();
const emit = defineEmits<{
    close: [];
}>();
const queryWhere: {
    where: {
        [p: string]: any;
    };
} = {
    where: {}
};

const onRefresh = async () => {
    if (props.auditNo) {
        queryWhere.where['audit_no'] = {
            equals: props.auditNo
        };
    }
    if (props.invoiceNo) {
        queryWhere.where['invoice_no'] = {
            equals: props.invoiceNo
        };
    }
    const req = new Request('发票实收付核销明细查询', {
        ...queryWhere,
    });
    const r = await req.post();

    totalnum.value = r.ext;
    tableData.value.length = 0;

    if (!isEmpty(r.obj)) {
        tableData.value = r.obj;
    }
};
const {
    currentPage,
    pageSize,
    totalnum,
    handleSizeChange,
    handleCurrentChange,
} = useTableInfo(onRefresh);

onMounted(() => {
    tableHeight.value = window.innerHeight - tableMaxHeightAdjust;
    onRefresh();
});
const closeWindow = () => {
    emit('close');
};
const tableHeaderColor = (data: {
    row: any;
    column: any;
    rowIndex: number;
    columnIndex: number;
}): CSSProperties => {
    const r: CSSProperties = {};
    if (invoiceArray.indexOf(data.column.property) >= 0) {
        r.background = '#00ff80';
    } else if (payArray.indexOf(data.column.property) >= 0) {
        r.background = '#ff0040';
    } else if (auditArray.indexOf(data.column.property) >= 0) {
        r.background = '#0040ff';
    }
    return r;
};
</script>
<style lang="scss" scoped>
.bg {
    margin-top: 10px;

    .btn {
        margin-right: 10px;
    }
}

.page {
    float: right;
    margin-top: 10px;
}
</style>
